import { useState } from 'react';
import { NavLink } from 'react-router';
import { Btn } from '@cmx/Btn';
import styles from './FrameMenu.module.css';

interface MenuCaption{
    caption: string;
    menu: string;
}
const FrameMenu = () => {
    const listMenus: MenuCaption[] = [
        { caption: "运行状态", menu: "status" },
        { caption: "配置", menu: "config" },
        { caption: "关于", menu: "about" }
    ];

    const [activeMenu, setActiveMenu] = useState<string>(listMenus[0].menu);

    return (
        <div className={`div-row ${styles.menuStyle}`}>
        {
            listMenus.map((x,i)=>{
                return (
                    <NavLink key={i} to={x.menu}>
                        <Btn text={x.caption} isActive={x.menu === activeMenu} onClick={()=>setActiveMenu(x.menu)} />
                    </NavLink>
                )
            }) 
        }
        </div>
    )
}

export { FrameMenu }